<template>
    <div class="container">
        <wd-header title="密码登录">
            <router-link to="/" slot="left">
                <span class="iconfont">&#xe697;</span>
            </router-link>
            <router-link to="/codelogin" slot="right" class="header-title">
                验证码登录
            </router-link>
        </wd-header>
        <div class="form">
            <p><i class="iconfont">&#xe64d;</i>
                <input type="tel" placeholder="请输入手机" v-model="tel" ref="tel">
            </p>
            <p><i class="iconfont">&#xe618;</i>
                <input type="password" placeholder="请输入密码" v-model="pwd" ref="pwd" maxlength="16">
            </p>
            <ul>
                <router-link :to="{name:'regist'}" tag="li">立即注册</router-link>
                <router-link :to="{name:'resetpassword'}" tag="li">重置密码</router-link>
            </ul>
        </div>
        <div class="denglu">
            <button @click="login" :class="[tel ? 'not_empty' : '']">登录</button>
        </div>
    </div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
    name: 'login',
    data() {
        return {
            tel: null,
            pwd: null,
            telReg: /(^1[3|4|5|7|8][0-9]{9}$)/,
            loginurl: 'http://www.jydsapp.com/jydsApi/api/h5/login/phonePasswordLogin'
        }
    },
    methods: {
        login() {
            let that = this
            if (that.telReg.test(that.tel) == false) {
                that.$Toast({
                    content:'请输入正确的手机号码'
                })
                that.$refs.tel.focus()
            } else {
                if (!that.pwd) {
                    that.$Toast({
                        content:'请输入密码'
                    })
                    that.$refs.pwd.focus()
                } else {
                    let str = `{"phoneNum":"${that.tel}","password":"${that.pwd}"}`
                    that.fetch({
                        method: 'post',
                        url: that.loginurl,
                        params: {
                            "paramStr": str
                        }
                    }).then((response) => {
                        if (response.data.code == 200) {
                            that.$Toast({
                                content:'登录成功！'
                            })
                            let res = JSON.parse(response.data.data)
                            let user = res
                            localStorage.user = JSON.stringify(user)
                            localStorage.freeCount = user.user.freeCount
                            setTimeout(()=>{
                                that.$router.replace('/')
                            },900)
                        } else {
                            that.$Toast({
                                content:response.data.message
                            })
                        }
                    }).catch((error) => {
                        that.$Toast({
                            content:error
                        })
                    });
                }
            }
        }
    }
}
</script>
<style lang="scss" scoped>

.form {
    display: flex;
    flex-direction: column;
    padding: 0 0.740741rem;
    margin-top: 0.833333rem;
    p {
        border-bottom: 1px solid #999;
        display: flex;
        margin-bottom: 0.37037rem;
        padding: 0.185185rem 0;

        .iconfont {
            color: #000
        }

        input {
            flex: 1;
            padding-bottom: 0.185185rem;
            text-align: center;
            background: none;
            transform: translateX(-2%);
        }
    }
    ul {
        display: flex;
        justify-content: space-between;
        li {
            color: #ff6633;
        }
    }
}

.denglu {
    padding: 0 0.740741rem;
    margin-top: 0.462963rem;
    display: flex;
    button {
        color: #aaa;
        flex: 1;
        height: 1.1rem;
        line-height: 1.1rem;
        background: none;
        border: 1px solid #aaa;
        border-radius: 0.148148rem;
    }

    button.not_empty{
        border: 1px solid #ff6633;
        color: #ff6633;
        transition: all .5s;
    }
}
</style>
